<template>
  <div class="myInfo">
    <van-nav-bar
      title="用户信息"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #left>
        <i class="iconfont">&#xe637;</i>
      </template>
      <template #title>
        <div>用户信息</div>
      </template>
      <template #right>
        <div @click="saveUserInfo">保存</div>
      </template>
    </van-nav-bar>
    <!-- 五个单元格 -->
    <van-cell @click="showAvatar = true" title="头像" is-link>
      <template #default>
        <img :src="userInfo.photo" alt="" />
      </template>
    </van-cell>
    <van-cell @click="openInput('name')" title="昵称" is-link>
      <template #default>
        <div class="value">{{ userInfo.name }}</div>
      </template>
    </van-cell>
    <van-cell @click="openInput('intro')" title="个人简介" is-link>
      <template #default>
        <div class="value">{{ intro }}</div>
      </template>
    </van-cell>
    <van-cell title="性别" @click="showGender = true" is-link>
      <template #default>
        <div class="value">{{ genderObj[userInfo.gender] }}</div>
      </template>
    </van-cell>
    <van-cell @click="showDate = true" title="生日" is-link>
      <template #default>
        <div class="value">{{ userInfo.birthday }}</div>
      </template>
    </van-cell>
    <!-- 头像的弹出框 -->
    <van-popup
      class="avatar"
      v-model="showAvatar"
      position="center"
      @close="closePopup"
    >
      <!-- <van-uploader v-model="avatarFile" class="upload"> -->
      <van-uploader
        :preview-image="false"
        :before-read="beforeRead"
        :after-read="afterRead"
        v-model="avatarFile"
        class="upload"
      >
        <div>点击上传图片</div>
      </van-uploader>
      <div>拍照</div>
      <div @click="cancelChangePhoto">取消</div>
    </van-popup>
    <!-- 点击图片上传后展示图片的组件 -->
    <!-- <van-popup v-model="showImg">
      <img src="@/assets/logo.png" alt="" />
    </van-popup> -->
    <!-- 昵称和个人简介的弹出框 -->
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '30%' }"
      @close="closePopup"
    >
      <van-field type="textarea" v-model="inputValue" :row="5"></van-field>
      <van-button @click="btnNI">确定</van-button>
    </van-popup>
    <!-- 修改性别的弹出框 -->
    <van-popup
      v-model="showGender"
      position="bottom"
      :style="{ height: '50%' }"
      @close="closePopup"
    >
      <van-picker
        v-if="bol"
        show-toolbar
        title="选择性别"
        :columns="columns"
        :default-index="userInfo.gender"
        @confirm="onGenderConfirm"
        @cancel="onGenderCancel"
      />
    </van-popup>
    <!-- 修改生日的弹出框 -->
    <van-popup
      v-model="showDate"
      position="bottom"
      :style="{ height: '50%' }"
      @close="closePopup"
    >
      <van-datetime-picker
        v-if="bol"
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onDateConfirm"
        @cancel="onDateCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { userProfile, save } from '@/api/my'
import moment from 'moment'
import { ImagePreview } from 'vant'
export default {
  data () {
    return {
      id: this.$route.query.id,
      intro: this.$route.query.intro,
      userInfo: '',
      genderObj: {
        0: '男',
        1: '女'
      },
      show: false,
      inputValue: '', // 输入框的输入内容
      type: 'name', // 类型
      showGender: false, // 是否展示性别选择器
      columns: ['男', '女'],
      bol: true,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      showDate: false,
      showAvatar: false, // 是否显示头像弹框
      avatarFile: [], // 图片显示
      showImg: true // 展示上传图片预览
    }
  },
  methods: {
    // 点击navBar左边
    onClickLeft () {
      this.$router.push('/home/my')
    },
    // 点击navBar右边
    onClickRight () {},
    // 获取用户信息
    async getMyInfo () {
      const res = await userProfile(this.id)
      this.userInfo = res.data
      this.currentDate = new Date(res.data.birthday)
      // this.avatarFile[0].url = res.data.photo
    },
    // 打开文本框
    openInput (type) {
      this.show = true
      this.type = type
    },
    // 修改昵称和个人简介
    btnNI () {
      this.show = false
      if (this.type === 'name') {
        this.userInfo.name = this.inputValue
      } else {
        this.intro = this.inputValue
      }
    },
    // 静默刷新，回复性别和生日的初始值
    closePopup () {
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    },
    // 性别弹框里按确定和取消
    onGenderConfirm (value, index) {
      this.showGender = false
      this.userInfo.gender = index
    },
    onGenderCancel () {
      this.showGender = false
    },
    // 生日弹框里按确定和取消
    onDateConfirm () {
      this.showDate = false
      this.userInfo.birthday = moment(this.currentDate).format('YYYY-MM-DD')
    },
    onDateCancel () {
      this.showDate = false
    },
    // 取消修改头像
    cancelChangePhoto () {
      this.showAvatar = false
    },
    // 读取前
    beforeRead (file) {
      const _type = file.type === 'image/png' || file.type === 'image/jpeg'
      const _size = file.size / 1024 / 1024 < 2
      if (!_type) {
        this.$toast.fail('请上传png或者jpeg格式图片')
      }
      if (!_size) {
        this.$toast.fail('请上传小于2M的图片')
      }
      return _type && _size
    },
    // 读取后
    async afterRead (res) {
      this.avatarFile[0].url = res.content
      this.showAvatar = false
      const _formData = new FormData() // 不能修改栈
      _formData.append('files', res.file)
      ImagePreview({
        images: [this.avatarFile[0].url],
        closeable: true,
        onClose () {
          this.$dialog
            .confirm({
              title: '提示',
              message: '是否修改照片'
            })
            .then(() => {
              console.log(this.userInfo.photo)
              // console.log(this.avatarFile[0].url)
              // this.userInfo.photo = this.avatarFile[0].url
            })
            .catch(() => {
              console.log('取消修改')
            })
        }
      })

      this.$toast.loading({
        duration: 500,
        message: '上传中...'
      })
      // const res2 = await upload(_formData)
      // this.inputValue = res2.data.data[0].id
      // this.$toast.success('上传成功')
      // window.console.log(res2)
    },
    // 删除图片时触发
    // deleteEvent () {
    //   this.inputValue = '' // 不显示保存
    // }
    // 保存修改的用户信息
    async saveUserInfo () {
      // console.log(this.userInfo)
      // console.log('photo', this.userInfo.photo)
      // console.log('name', this.userInfo.name)
      // console.log('intro', this.intro)
      // console.log('gender', this.userInfo.gender)
      // console.log('birthday', this.userInfo.birthday)
      await save({
        // photo: this.userInfo.photo,
        name: this.userInfo.name
        // intro: this.intro,
        // gender: this.userInfo.gender
        // birthday: this.userInfo.birthday
      })
    }
  },
  created () {
    this.getMyInfo()
  },
  watch: {
    show (newVal) {
      if (!newVal) {
        this.inputValue = ''
      }
    },
    showDate (newVal) {
      if (!newVal) {
        this.currentDate = new Date(this.userInfo.birthday)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.myInfo {
  .van-nav-bar {
    background: @color;
    color: #fff;
    ::v-deep .van-nav-bar__left {
      padding-left: 5px;
      .iconfont {
        font-size: 36px;
      }
    }
    ::v-deep .van-nav-bar__title {
      color: #fff;
    }
  }
  .van-cell {
    display: flex;
    align-items: center;
    .van-cell__value {
      ::v-deep img {
        width: 30px;
        height: 30px;
        line-height: 35px;
        border-radius: 50%;
      }
    }
  }
  .van-popup {
    background: #f1f3f4;
    .van-field {
      margin: 45px @p15 @p15 @p15;
      width: 92%;
      background: #fff;
    }
    .van-button {
      float: right;
      margin-right: 15px;
    }
    ::v-deep .van-picker-column__wrapper {
      margin: 0 auto;
    }
  }
  .avatar {
    width: 50%;
    text-align: center;
    border-radius: 10px;
    .upload {
      width: 100%;
      text-align: center;
      ::v-deep div {
        width: 100%;
      }
    }
    div {
      height: 50px;
      line-height: 50px;
      font-size: 18px;
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>
